import React from "react";
import {Table,Button,Popconfirm,Drawer} from "antd";
import {tools} from "utils"
import style from "../index.css";
const ImageList = ({data,rowSelection,remove,getImageInfo})=>{
  const columns = [{
    title: 'ID',
    dataIndex: 'Id',
    key:'Id',
    render: (text,record) => (
      <a href="javascript:;" onClick={()=>{
        getImageInfo(record);
        }
      }>{text.substr(0,20)}</a>
    ),
  }, {
    title: 'Tags',
    dataIndex: 'RepoTags',
    key:'tags',
  }, {
    title: 'Size',
    dataIndex: 'Size',
    key:'size',
    render: (text,record) => (
      <a href="javascript:;">{tools.bytesToSize(text)}</a>
    ),

  },
    {
      title: 'Created',
      dataIndex: 'Created',
      key:'created',
    }
  ];
  const dataSource = data.image.map((item)=>{
    return {...item,key:item.Id}
  });
  const buttonSize = 'large';
  return(
    <div>
      <div className={style['button-group']}>
        <Popconfirm placement="top" title="确认删除选择的列？删除后无法恢复" onConfirm={remove} okText="Yes" cancelText="No">
          <Button type="danger" disabled={data.selectKeys.length===0?true:false} size={buttonSize}>
            删除
          </Button>
        </Popconfirm>
      </div>
      <Drawer
        title="Basic Drawer"
        placement="right"
        closable={true}
        visible={false}
        width={650}
      >
      </Drawer>
      <Table rowSelection={rowSelection} columns={columns} dataSource={dataSource}/>
    </div>
  );
};
export default ImageList;
